import React, { useState } from 'react';
import { View, StyleSheet, SafeAreaView } from 'react-native';
import { TabBar, Button, Dialog } from 'tdesign-mobile-react';

// 导入页面组件
import HomeScreen from '../screens/HomeScreen';
import TripScreen from '../screens/TripScreen';
import NearbyScreen from '../screens/NearbyScreen';
import CommunityScreen from '../screens/CommunityScreen';
import MessageScreen from '../screens/MessageScreen';
import ProfileScreen from '../screens/ProfileScreen';

const BottomTabNavigator = () => {
  const [activeTab, setActiveTab] = useState('home');
  const [currentScreen, setCurrentScreen] = useState('Home');
  const [showCreateDialog, setShowCreateDialog] = useState(false);

  // 定义标签页配置
  const tabList = [
    {
      value: 'home',
      label: '首页',
      icon: 'home',
    },
    {
      value: 'trip',
      label: '行程',
      icon: 'location',
    },
    {
      value: 'nearby',
      label: '附近',
      icon: 'location-1',
    },
    {
      value: 'create',
      label: '创建行程',
      icon: 'add-circle',
      badge: null,
    },
    {
      value: 'community',
      label: '社区',
      icon: 'chat',
    },
    {
      value: 'message',
      label: '消息',
      icon: 'mail',
      badge: 3,
    },
    {
      value: 'profile',
      label: '我',
      icon: 'user',
    },
  ];

  const handleTabChange = (value) => {
    if (value === 'create') {
      setShowCreateDialog(true);
      return;
    }
    
    setActiveTab(value);
    // 根据tab值设置对应的屏幕
    const screenMap = {
      home: 'Home',
      trip: 'Trip',
      nearby: 'Nearby',
      community: 'Community',
      message: 'Message',
      profile: 'Profile',
    };
    setCurrentScreen(screenMap[value] || 'Home');
  };

  const handleCreateTrip = () => {
    setShowCreateDialog(false);
    console.log('创建行程');
  };

  // 渲染当前屏幕组件
  const renderCurrentScreen = () => {
    const screenComponents = {
      Home: HomeScreen,
      Trip: TripScreen,
      Nearby: NearbyScreen,
      Community: CommunityScreen,
      Message: MessageScreen,
      Profile: ProfileScreen,
    };
    
    const ScreenComponent = screenComponents[currentScreen] || HomeScreen;
    return <ScreenComponent />;
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.content}>
        {renderCurrentScreen()}
      </View>
      
      <TabBar
        value={activeTab}
        onChange={handleTabChange}
        list={tabList}
        theme="tag"
        split={false}
        style={styles.tabBar}
      />

      <Dialog
        visible={showCreateDialog}
        title="创建行程"
        content="确认创建新的行程吗？"
        confirmBtn="确认"
        cancelBtn="取消"
        onConfirm={handleCreateTrip}
        onCancel={() => setShowCreateDialog(false)}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  content: {
    flex: 1,
  },
  tabBar: {
    backgroundColor: '#fff',
    borderTopWidth: 1,
    borderTopColor: '#e5e5e5',
  },
});

export default BottomTabNavigator;